<template>
	<div class="params">
		<el-form
			ref="ruleForm"
			:model="ruleForm"
			label-width="130px"
			class="rule-form"
			:inline="true"
			label-position="left"
		>
			<!-- 功能开关 -->
			<el-row>
				<SwitchToggle
					permissionId="90240057"
					:configData="configData"
					:switchTitle="switchTitle"
					@getTypeValueAddedConfig="getValueAddedConfigByType"
				></SwitchToggle>
			</el-row>
			<el-form-item
				prop="perTableCount"
				:label="$t('dxn.service_manager.person_table_count')"
			>
				<el-input
					v-if="isEdit"
					v-model="ruleForm.perTableCount"
					style="width: 80px;"
					v-input="{ name: 'int' }"
					:maxlength="3"
				></el-input>
				<span v-else>
					{{ ruleForm.perTableCount }}
				</span>
				<span>次</span>
			</el-form-item>

			<el-form-item
				v-if="hasPermission('90240057')"
				style="margin-left: 20px;"
			>
				<div v-if="!isEdit">
					<el-button
						type="primary"
						@click="handleConfigEdit"
						size="small"
					>
						{{ $t('dxn.game_rule.edit_btn') }}
					</el-button>
				</div>
				<div v-else>
					<el-button
						type="plain"
						@click="handleConfigCancel"
						size="small"
					>
						{{ $t('dxn.game_rule.cancel_btn') }}
					</el-button>
					<el-button
						type="primary"
						:loading="btnLoading"
						@click="handleConfigSubmit"
						size="small"
					>
						{{ $t('dxn.game_rule.save_btn') }}
					</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import list from '@/mixins/list'
import SwitchToggle from '@/views/dxn/serviceManager/components/SwitchToggle'
export default {
	components: { SwitchToggle },
	mixins: [list],
	props: {
		switchTitle: {
			type: String,
			default: ''
		},
		configItem: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			btnLoading: false,
			isEdit: false,
			disabled: true,
			configData: {
				configId: 0,
				configStatus: 0
			},
			ruleForm: {
				perTableCount: undefined
			}
		}
	},
	watch: {
		configItem: {
			handler(val) {
				if (val?.configId) {
					this.configData = {
						configId: this.configItem.configId,
						configStatus: this.configItem.configStatus || 0
					}
					this.ruleForm = {
						perTableCount: this.configItem.perTableCount
					}
				}
			},
			immediate: true
		}
	},
	methods: {
		getValueAddedConfigByType() {
			this.$emit('getValueAddedConfigByTypes', this.configItem.configType)
		},
		handleConfigEdit() {
			this.isEdit = true
		},
		handleConfigCancel() {
			this.isEdit = false
			this.ruleForm = {
				perTableCount: this.configItem.perTableCount
			}
		},
		handleConfigSubmit() {
			this.$message.closeAll()
			if (!this.configData.configId) {
				this.$message.error(
					this.$t('dxn.service_manager.config_not_exist_tips')
				)
				return
			}
			if (this.ruleForm.perTableCount === '') {
				this.$message.error(
					this.$t('dxn.service_manager.person_table_count_tips')
				)
				return
			}
			const valArr = ['perTableCount' + '_' + this.ruleForm.perTableCount]
			const params = {
				id: this.configData.configId,
				vals: valArr.join(',')
			}
			this.btnLoading = true
			this.$api
				.updateValueAddedConfigBend(params)
				.then((res) => {
					this.btnLoading = false
					this.isEdit = false
					if (res?.code === 200) {
						this.$message.success(this.$t('common.action_success'))
						this.$emit(
							'getValueAddedConfigByTypes',
							this.configItem.configType
						)
					}
				})
				.catch(() => {
					this.btnLoading = false
				})
		}
	}
}
</script>
<style lang="scss" scoped>
.rule-form {
	margin: 15px 30px;
}
</style>
